<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <el-container class="first-container">
      <!--<editor-fold desc="标题">-->
      <el-header class="header">
        <header-line :lineCode="lineCode" :inMterial="data.inMterial" :outMterial="data.outMterial" :classes="data.classes" :period="data.period"
                     :currentProcess="data.currentProcess"></header-line>
      </el-header>
      <!--</editor-fold>-->
      <el-container class="second-container">
        <!--<editor-fold desc="条线选择">-->
        <el-aside class="second-aside">
          <el-container class="container" direction="vertical">
            <el-card class="box-card" :body-style="{padding: 0,height: '80%'}">
              <template #header>
                <div class="title-wrapper">
                  <icon-font icon-class="afl-xuanze" :icon-style="{fontSize:'20px'}"></icon-font>
                  {{
                    data.lineTitle
                  }}
                </div>
              </template>
              <el-empty :description="$t('mes.noDataYet')" v-if="data.processList.length == 0"/>
              <el-scrollbar style="height: 100%" v-else>
                <el-menu :default-active="data.active+''"
                         class="el-menu-vertical"
                         direction="vertical"
                         @select="menuSelect"
                         active-text-color="#fff"
                >
                  <el-menu-item v-for="(item, index) in data.processList" :index="`${index}`" :key="index">
                    <icon-font icon-class="afl-chanxianguanli"></icon-font>
                    <span style="margin-left: 10px">{{ item.productionLineCode }}</span>
                  </el-menu-item>
                </el-menu>
              </el-scrollbar>
            </el-card>
          </el-container>
        </el-aside>
        <!--</editor-fold>-->
        <!--<editor-fold desc="数据展示">-->
        <el-container class="second-main">
          <table-list :lineCode="lineCode" :putInto="data.putInto" @getChildren="oncFun"></table-list>
        </el-container>
      </el-container>
    </el-container>
  </ScaleBox>
</template>

<script setup>
import aflLoading from '@/components/loading'
// import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import processLine from '@/components/mes/common/processLine'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import headerLine from '@/components/wms/inputAndOutput/headerLine'
import tableList from '@/components/wms/inputAndOutput/tableList'
import useI18n from '@/hooks/language'

const { t } = useI18n()

const data = reactive({
  ready: false,
  lineCount: '',
  lineTitle: t('wms.processSelection'),
  processList: [{ productionLineCode: 'TH' }, { productionLineCode: 'JKJ' }, { productionLineCode: 'PE' }, { productionLineCode: 'DR' }],
  JCPDLine: true,
  active: 0,
  outList: '',
  period: [],
  classes: '',
  currentProcess: 'TH',
  outMterial: '',
  inMterial: ''
})

onMounted(() => {
  data.ready = true
  oncFun()
})

// 历史数据接收子组件传递的值
const oncFun = (x, y, z) => {
  console.log('父组件函数,接收到子组件的值为:', x, y, z)
  data.period = x
  data.outMterial = y
  data.inMterial = z
  watch(() => [data.outMterial, data.period, data.inMterial], () => {
    console.log(data.inMterial, data.outMterial, data.classes)
  })
}

/* 菜单点击切换的时候触发 */
const lineCode = ref('TH')
const menuClick = (processRow) => {
  console.log(processRow)
  lineCode.value = processRow?.productionLineCode
}

const emits = defineEmits(['handle'])

const menuSelect = (index) => {
  if (Number(index) === 0) {
    data.JCPDLine = true
  } else {
    data.JCPDLine = false
  }
  const item = data.processList[index]
  lineCode.value = item.productionLineCode
  data.currentProcess = item.productionLineCode
  emits('handle', item)
  // console.log(lineCode.value)
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
